<template>
  <div class="production-progress">
    <el-progress
      @click.native="clickHandle"
      type="circle"
      v-bind="$attrs"
      stroke-linecap="butt"
      :format="format"
      :stroke-width="15"
      :width="200"
    />
    <div class="progress-text">{{ text }}</div>
  </div>
</template>
<script>
export default {
  name: "productionProgress",
  props: {
    text: {
      type: String,
      default: "",
    },
  },
  methods: {
    format(percentage) {
      return `完成${percentage}%`;
    },
    clickHandle() {
      this.$emit("progress-click", this.$attrs.percentage);
    },
  },
};
</script>
<style lang="scss" scoped>
.production-progress {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  ::v-deep .el-progress__text {
    font-size: 14px !important;
  }
  ::v-deep .el-progress-circle {
    cursor: pointer;
  }
  .progress-text {
    font-size: 20px;
    padding: 20px 0;
    text-align: center;
  }
}
</style>
